<main>
    <#include './top.ftl'>
	<section class="switch-tab">
		<div class="switch-item is-active" onclick="changeConTab(this,0)">Overview</div>
		<div class="switch-item" onclick="changeConTab(this,1)">Post</div>
		<div class="switch-item" onclick="changeConTab(this,2)">Followers</div>
	</section>
    <#include './overview.ftl'>
    <#include './post.ftl'>
    <#include './follower.ftl'>
</main>
<script>
    function initEvent() {
        let tabs = document.querySelectorAll('.tab-row .tabs .tab')
        tabs.forEach(tab => {
            tab.addEventListener('touchstart', (e) => {
                tab.parentNode.querySelectorAll('.tab').forEach(item => {
                    item.classList.remove('is-active')
                })
                tab.classList.add('is-active')
                let funcName = tab.getAttribute('data-name')
                if (funcName === 'daily') {
                    dailyType = +tab.getAttribute('data-type')
                    setDailyChart()
                } else {
                    postType = +tab.getAttribute('data-type')
                    setPostChart()
                }
            })
        })
        let pop = document.getElementById('popDate')
        let popTabs = document.getElementById('popTabs')
        pop.addEventListener('touchstart', (e) => {
            popTabs.toggleShow()
        })
        popTabs.querySelectorAll('.pop-tab').forEach((item, index) => {
            item.addEventListener('touchstart', (e) => {
                popTabs.querySelectorAll('.pop-tab').forEach(poptab => {
                    poptab.classList.remove('is-active')
                })
                item.classList.add('is-active')
                document.getElementById('popTitle').innerHTML = item.innerText
                let activeTab = document.querySelector('.daily-performance .tab.is-active')
                currentDay = index === 0 ? 7 : 30
                dailyType = +activeTab.getAttribute('data-type')
                getDailyTrend()
            })
        })
        document.getElementById('btnShowExam').addEventListener('touchstart', (e) => {
            document.querySelector('.lock-row').hide()
            document.querySelectorAll('.unlock-row').forEach(item => {
                item.show('flex')
            })
        })
        <#if login == false>
        document.querySelectorAll('.lock-mask .btn-info').forEach(btn => {
            btn.addEventListener('touchstart', () => {
                toLogin()
            })
        })
        <#else>
        document.querySelectorAll('.lock-mask .btn-info').forEach(btn => {
            btn.addEventListener('touchstart', (e) => {
                checkUnlockPermission()
            })
        })
        <#if isUnlocked == true>
        document.querySelector('.lock-mask').showLoading()
        getDailyTrend()
        getPostTrend()
        document.querySelector('.lock-row').hide()
        document.querySelectorAll('.unlock-row').forEach(item => {
            item.hide()
        })
        </#if>
        </#if>
    }

    function showExp(index = 1) {
        document.querySelector('.tab-con-' + index + ' .unlock-row').show('flex')
        document.querySelector('.tab-con-' + index + ' .lock-mask').hide()
    }

    function getLanguage(data) {
        let str = ''
        data.forEach(item => {
            str += '<div class="lan-item">' +
                '<div class="cir"></div>' +
                '<div class="label">' + item.property + '</div>' +
                '<div class="num">' + item.value + '%</div>' +
                '</div>'
        })
        document.getElementById('languageChart').innerHTML = str
    }

    function getDailyTrend() {
        let infoType = 1
        if (currentDay !== 7) {
            infoType = 2
        }
        _axios.get('/v1/blogger/performance/${blogger.uid?c}/' + infoType).then(res => {
            if (res && res.Code === 200) {
                if (infoType === 1) {
                    dailyX7Data = res.Data.map(item => formateToDate(item.datecode))
                    dailyYFollow7Data = res.Data.map(item => item.followerGrowth)
                    dailyYLike7Data = res.Data.map(item => item.likeGrowth)
                } else {
                    dailyX30Data = res.Data.map(item => formateToDate(item.datecode))
                    dailyYFollow30Data = res.Data.map(item => item.followerGrowth)
                    dailyYLike30Data = res.Data.map(item => item.likeGrowth)
                }
                dailyType = +document.querySelector('.daily-performance .tab.is-active').getAttribute('data-type')
                setDailyChart()
            }
            document.querySelector('.lock-mask').hideLoading()
        })
    }

    function getPostTrend() {
        _axios.get('/v1/blogger/aweme/performance//${blogger.uid?c}/2').then(res => {
            if (res.Code === 200) {
                postXData = res.Data.map(item => dateFormat(item.createTime))
                postImg = res.Data.map(item => item.cover)
                postTitle = res.Data.map(item => item.title)
                postTime = res.Data.map(item => formatTime(+item.createTime, 'MM-DD-YYYY HH:mm:ss'))
                postYFollowData = res.Data.map(item => item.views)
                postYLikeData = res.Data.map(item => item.likes)
                postType = +document.querySelector('.post-performance .tab.is-active').getAttribute('data-type')
                setPostChart()
            }
        })
    }

    let first = {}

    function changeConTab(e, type) {
        let tab1 = document.querySelector('.tab-con-0')
        let tab2 = document.querySelector('.tab-con-1')
        let tab3 = document.querySelector('.tab-con-2')
        if (type === 0) {
            e.classList.add('is-active')
            e.nextElementSibling.classList.remove('is-active')
            e.nextElementSibling.nextElementSibling.classList.remove('is-active')
            tab1.show()
            tab2.hide()
            tab3.hide()
        } else if (type === 1) {
            e.classList.add('is-active')
            e.previousElementSibling.classList.remove('is-active')
            e.nextElementSibling.classList.remove('is-active')
            tab1.hide()
            tab2.show()
            tab3.hide()
            if (!first.tab2) {
                first.tab2 = true
                initPostAnalysics()
            }
        } else {
            e.classList.add('is-active')
            e.previousElementSibling.classList.remove('is-active')
            e.previousElementSibling.previousElementSibling.classList.remove('is-active')
            tab1.hide()
            tab2.hide()
            tab3.show()
            if (!first.tab3) {
                first.tab3 = true
                getFansPortrait()
            }
        }
    }
</script>